<template>
  <div>
  </div>
</template>

<script>
// 导入图片
const img = require('@/assets/大声发.jpg');
const img2 = require('@/assets/鸡哥.jpg');
// 导入utils.js
import { oc } from '@/utils/index.js'
// 导入pixi.js
import * as PIXI from 'pixi.js'
// 导入捆绑包pixi/asstes
import { Assets } from '@pixi/assets';
// 导入pixi滤镜包
import { OutlineFilter, TwistFilter } from 'pixi-filters';

// 创建应用
const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0x1099bb,
  resolution: window.devicePixelRatio || 1,// 分辨率
  antialias: true, // 抗锯齿
})
// 将应用画布添加到DOM中
document.body.appendChild(app.view)

// 创建一个矩形
const rectangle = new PIXI.Graphics();
// 设置矩形的填充颜色
rectangle.beginFill(0x66CCFF,0.5);// 填充颜色,透明度
// 设置矩形的边框
rectangle.lineStyle(4, 0xffd900, 1);// 边框宽度,边框颜色,透明度
// 绘制一个矩形
rectangle.drawRect(0, 0, 100, 100);
// 矩形的位移
rectangle.position.set(100, 100);

// 矩形的锚点,默认是左上角,旋转、缩放都是以锚点为中心
// 将50，50设置为锚点，然后点移动到之前设置的position的位置，所以图形就会往左上移动50，50
rectangle.pivot.set(50, 50);

// 矩形的旋转
rectangle.rotation = oc(45);

// 结束绘制
rectangle.endFill();

// 将矩形添加到舞台中
app.stage.addChild(rectangle);

// 创建一个圆形
const circle = new PIXI.Graphics();
// 设置圆形的填充颜色
circle.beginFill(0x66CCFF,0.5);// 填充颜色,透明度
// 设置圆形的边框
circle.lineStyle(4, 0xffd900, 1);// 边框宽度,边框颜色,透明度
// 绘制一个圆形
circle.drawCircle(300, 100, 50);// 圆心x,圆心y,半径
// 结束绘制
circle.endFill();
// 将圆形添加到舞台中
app.stage.addChild(circle);

// 创建一个圆角矩形
const roundedRect = new PIXI.Graphics();
// 设置圆角矩形的填充颜色
roundedRect.beginFill(0x66CCFF,0.5);// 填充颜色,透明度
// 设置圆角矩形的边框
roundedRect.lineStyle(4, 0xffd900, 1);// 边框宽度,边框颜色,透明度
// 绘制一个圆角矩形
roundedRect.drawRoundedRect(400, 50, 150, 100, 10);// 左上角x,左上角y,宽度,高度,圆角半径
// 结束绘制
roundedRect.endFill();
// 将圆角矩形添加到舞台中
app.stage.addChild(roundedRect);

// 创建一个椭圆
const ellipse = new PIXI.Graphics();
// 设置椭圆的填充颜色
ellipse.beginFill(0x66CCFF,0.5);// 填充颜色,透明度
// 设置椭圆的边框
ellipse.lineStyle(4, 0xffd900, 1);// 边框宽度,边框颜色,透明度
// 绘制一个椭圆
ellipse.drawEllipse(700, 100, 100, 50);// 圆心x,圆心y,半径x,半径y
// 结束绘制
ellipse.endFill();
// 将椭圆添加到舞台中
app.stage.addChild(ellipse);

// 创建一个多边形
const polygon = new PIXI.Graphics();
// 设置多边形的填充颜色
polygon.beginFill(0x66CCFF,0.5);// 填充颜色,透明度
// 设置多边形的边框
polygon.lineStyle(4, 0xffd900, 1);// 边框宽度,边框颜色,透明度
// 绘制一个多边形，五边形
polygon.drawPolygon([800, 100, 850, 50, 900, 100, 875, 150, 825,150]);// 多边形的点
// 移动位置
polygon.position.set(20, 0);
// 结束绘制
polygon.endFill();
// 将多边形添加到舞台中
app.stage.addChild(polygon);

// 创建一个圆弧
const arc = new PIXI.Graphics();
// 设置圆弧的填充颜色
arc.beginFill(0x66CCFF,0.5);// 填充颜色,透明度
// 设置圆弧的边框
arc.lineStyle(4, 0xffd900, 1);// 边框宽度,边框颜色,透明度
// 绘制一个圆弧
arc.arc(1000, 100, 50, oc(0), oc(180));// 圆心x,圆心y,半径,起始角度,结束角度
// 结束绘制
arc.endFill();
// 将圆弧添加到舞台中
app.stage.addChild(arc);

// 创建一个直线
const line = new PIXI.Graphics();
// 设置直线的填充颜色
line.beginFill(0x66CCFF,0.5);// 填充颜色,透明度
// 设置直线的边框
line.lineStyle(4, 0xffd900, 1);// 边框宽度,边框颜色,透明度
// 绘制一个直线
line.moveTo(1100, 100);// 起点x,起点y
line.lineTo(1200, 100);// 终点x,终点y
// 结束绘制
line.endFill();
// 将直线添加到舞台中
app.stage.addChild(line);

// 创建一个纹理,导入图片地址
const texture = PIXI.Texture.from(img);
// 创建一个精灵
const sprite = new PIXI.Sprite(texture);
// 设置精灵的位置
sprite.position.set(150, 400);
// 设置精灵的锚点
sprite.anchor.set(0.5, 0.5);
// 设置精灵缩放
sprite.scale.set(0.2);
// 设置精灵旋转
sprite.rotation = oc(45);
// ticker添加动画
app.ticker.add(() => {
  // 旋转
  sprite.rotation += 0.01;
});

// 为精灵添加点击事件
sprite.interactive = true;
sprite.on('click', () => {
  console.log('点击了大声发图片精灵');
});
// 为精灵添加鼠标移入事件
sprite.on('mouseover', () => {
  // 动画暂停
  app.ticker.stop();
  console.log('鼠标移入了大声发图片精灵');
});
// 为精灵添加鼠标移出事件
sprite.on('mouseout', () => {
  // 动画开始
  app.ticker.start();
  console.log('鼠标移出了大声发图片精灵');
});

// 将精灵添加到舞台中
app.stage.addChild(sprite);


// 通过捆绑包Assets添加资源
Assets.add('dashengfa', img);
Assets.add('jige', img2);

// 加载资源
Assets.load(['dashengfa', 'jige']).then((texture) => {
  // 创建一个容器
  const container = new PIXI.Container();
  // 创建一个精灵
  const spriteDashengfa = new PIXI.Sprite(texture.dashengfa);
  // 设置精灵的大小
  spriteDashengfa.width = 250;
  spriteDashengfa.height = 200;
  // 设置精灵的位置
  spriteDashengfa.position.set(300, 300);
  // 将精灵添加到容器中
  container.addChild(spriteDashengfa);
  // 将精灵添加到舞台中
  // app.stage.addChild(spriteDashengfa);

  // 创建一个精灵
  const spriteJige = new PIXI.Sprite(texture.jige);
  // 设置精灵的大小
  spriteJige.width = 200;
  spriteJige.height = 200;
  // 设置精灵的位置
  spriteJige.position.set(550, 300);
  // 将精灵添加到舞台中
  // app.stage.addChild(spriteJige);
  // 将精灵添加到容器中
  container.addChild(spriteJige);

  // 将容器添加到舞台中
  app.stage.addChild(container);
});

// 添加场景1的资源
Assets.addBundle('scene1', {
  dashengfa: img,
  jige: img2,
});
// 加载场景1的资源
Assets.loadBundle('scene1').then((texture) => {
  // 创建一个精灵
  const spriteDashengfa = new PIXI.Sprite(texture.dashengfa);
  // 设置精灵的大小
  spriteDashengfa.width = 250;
  spriteDashengfa.height = 200;
  // 设置精灵的位置
  spriteDashengfa.position.set(800, 300);
  // 将精灵添加到舞台中
  app.stage.addChild(spriteDashengfa);

  // 创建一个精灵
  const spriteJige = new PIXI.Sprite(texture.jige);
  // 设置精灵的大小
  spriteJige.width = 200;
  spriteJige.height = 200;
  // 设置精灵的位置
  spriteJige.position.set(1050, 300);
   // 将精灵添加到舞台中
   app.stage.addChild(spriteJige);
});

// 创建一个hello world的文本
const text = new PIXI.Text('hello world', {
  fontSize: 50,
  fill: 0xff1010,
});
// 设置文本的位置
text.position.set(50, 600);
// 创建一个精灵
const spriteText = PIXI.Sprite.from(img);
// 设置精灵的大小
spriteText.width = 250;
spriteText.height = 200;
// 设置精灵的位置
spriteText.position.set(50, 600);
// 把文本作为图片精灵的遮罩
spriteText.mask = text;
// 将文本添加到舞台中
app.stage.addChild(spriteText);

// 导入一个图片作为精灵
const spriteImg = PIXI.Sprite.from(img2);
// 设置精灵的大小
spriteImg.width = 200;
spriteImg.height = 200;
// 设置精灵的位置
spriteImg.position.set(300, 600);
// 将精灵添加到舞台中
app.stage.addChild(spriteImg);

// 创建模糊滤镜
const blurFilter = new PIXI.filters.BlurFilter();
// 设置模糊滤镜的模糊程度
blurFilter.blur = 10;

// 创建轮廓滤镜
const outlineFilter = new OutlineFilter(2, 0xff0000);
// 将模糊滤镜添加到精灵上、将轮廓滤镜添加到精灵上
spriteImg.filters = [blurFilter, outlineFilter];

// 创建扭曲滤镜
const twistFilter = new TwistFilter({
  angle: 10,
  radius: 100,
  offset: {
    x: 400,
    y: 700,
  },
});

// 为精灵添加事件
spriteImg.interactive = true;
// 鼠标移入精灵上时，移除模糊滤镜
spriteImg.on('mouseover', () => {
  // 设置模糊滤镜的模糊程度
  blurFilter.blur = 0;
  // 将扭曲滤镜添加到精灵上
  spriteImg.filters = [...spriteImg.filters,twistFilter];
});
// 鼠标移出精灵上时，添加模糊滤镜
spriteImg.on('mouseout', () => {
  // 设置模糊滤镜的模糊程度
  blurFilter.blur = 10;
  // 将扭曲滤镜从精灵上移除
  spriteImg.filters = [blurFilter, outlineFilter];
});

export default {
  name: 'App',
  
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
canvas {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
